<template>
  <div
    class="base-text"
    :style="textStyle"
    :class="{ 'ellipsis': props.config?.ellipsis, 'text-selectable': props.config?.selectable }"
    @click="handleClick"
  >
    {{ displayText }}
    <div v-if="loading" class="loading-overlay">
      <span class="loading-spinner"></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, CSSProperties } from 'vue'
import { ComponentInstance } from '@/types/visual-app'
import { useDynamicComponentStore } from '@/store/dynamicComponent'
import { useVisualStore } from '@/store/visual'
import { axiosInstance } from '@/utils/http/index'
import { transformData } from '@/utils/visual/ConfigUtil'

const BASE_API = axiosInstance.defaults.baseURL
const dynamicComponentStore = useDynamicComponentStore()
const dynamicVisualStore = useVisualStore()
const props = defineProps<ComponentInstance>()

// 本地状态
const localText = ref(props.config?.text ?? '普通文本')
const localBindings = ref<any[]>(Array.isArray(props.bindings) ? [...props.bindings] : [])
const loading = ref(false)
const error = ref<string | null>(null)

// 计算属性
const displayText = computed(() => {
  if (error.value) return error.value
  if (props.config?.useBinding && localBindings.value.length > 0) {
    return transformData(localBindings.value[0].value, props.config?.textFormat)
  }
  return localText.value
})

const textStyle = computed<CSSProperties>(() => ({
  width: props.width ? `${props.width}px` : 'auto',
  height: props.height ? `${props.height}px` : 'auto',
  background: props.bgColor || 'none',
  borderRadius: props.config?.radius ? `${props.config.radius}px` : '0',
  color: props.config?.color || 'inherit',
  fontSize: props.config?.fontSize ? `${props.config.fontSize}px` : 'inherit',
  fontWeight: props.config?.bold ? 'bold' : 'normal',
  fontStyle: props.config?.italic ? 'italic' : 'normal',
  textDecoration: props.config?.underline ? 'underline' : 'none',
  textAlign: props.config?.align || 'left',
  lineHeight: props.config?.lineHeight || 'normal',
  padding: props.config?.padding ? `${props.config.padding}px` : '0',
  overflow: props.config?.ellipsis ? 'hidden' : 'visible',
  whiteSpace: props.config?.ellipsis ? 'nowrap' : 'normal',
  textOverflow: props.config?.ellipsis ? 'ellipsis' : 'clip'
}))

// 监听器
watch(() => props.config?.text, (val) => {
  localText.value = val || '普通文本'
})

watch(() => props.bindings, (newBindings) => {
  localBindings.value = Array.isArray(newBindings) ? [...newBindings] : []
}, { deep: true })

// 生命周期钩子
onMounted(() => {
  if (props.config?.useBinding && localBindings.value.length > 0) {
    fetchBindingData()
  }
})

// 方法
const fetchBindingData = async () => {
  if (!props.config?.useBinding || localBindings.value.length === 0) return
  
  try {
    loading.value = true
    error.value = null
    
    // 这里可以根据实际需求实现数据获取逻辑
    // 例如从API获取数据并更新localBindings.value
    
    loading.value = false
  } catch (err) {
    loading.value = false
    error.value = '数据加载失败'
    console.error('Failed to fetch binding data:', err)
  }
}

const handleClick = () => {
  if (props.config?.clickEvent) {
    // 触发点击事件处理
    console.log('Text clicked, event:', props.config.clickEvent)
    // 可以根据配置执行不同操作，如跳转链接、触发动作等
  }
}
</script>

<style scoped>
.base-text {
  position: relative;
  display: inline-block;
  user-select: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.text-selectable {
  user-select: text;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  border-top-color: #333;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>